<template>
  <div v-loading="loading" class="gl_contentBox gl_heightFull">
    <div>
      <el-divider content-position="left">教练业务</el-divider>
      <!-- <span class="gl_pr_10">教练业务：</span> -->
      <div class="gl_dis_ib gl_middle">
        <el-checkbox
          v-for="(coach, index) in coachList"
          :key="coach.id"
          :true-label="'true' + index"
          :false-label="'false' + index"
          :checked="coach.isCoach"
          class="gl_mb_15"
          @change="handleCheckCoach"
        >
          {{ coach.name }}
        </el-checkbox>
      </div>
    </div>
    <div class="gl_mt_15">
      <el-divider content-position="left">销售业务</el-divider>
      <div class="gl_dis_ib gl_middle">
        <el-checkbox
          v-for="(sale, sndex) in saleList"
          :key="sale.id"
          :true-label="'true' + sndex"
          :false-label="'false' + sndex"
          :checked="sale.isSale"
          class="gl_mb_15"
          @change="handleCheckSale"
        >
          {{ sale.name }}
        </el-checkbox>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import {
  api_GET_ClubEmployeeTag, // 获取
  api_PUT_ClubEmployeeTagId // 更新
} from '@/extend/api/hallswaggerApi/app.js';
import {
  Api_GET_ClubEmployeeTagQO
} from '@/lib/form/hall/swaggerForm.js';
export default {
  data() {
    return {
      loading: false,
      form: new Api_GET_ClubEmployeeTagQO(),
      coachList: [],
      saleList: []
    };
  },
  computed: {
    ...mapState({
      currentUserType: state => state.user.currentUserType
    })
  },
  watch: {
    'currentUserType': {
      immediate: true,
      deep: true,
      handler(val) {
        if (val && val.organizationUnitId) {
          this.getData(val.organizationUnitId);
        }
      }
    }
  },
  methods: {
    getData(id) {
      var that = this;
      that.loading = true;
      // that.form.OrganizationUnitId = id;
      // that.form.EmployeeTypeCodes = ['Coach', 'Sale'];
      that.form.IncludeEmployeeTagEmployeeTypes = true;
      that.form.IncludeEmployeeEmployeeTags = true;
      api_GET_ClubEmployeeTag(that.form).then(res => {
        that.formatData(res.items);
        that.loading = false;
      }).catch(error => {
        that.loading = false;
        that.$message({ type: 'error', message: error.error.message });
      });
    },
    formatData(data) {
      this.coachList = [];
      this.saleList = [];
      for (let i = 0; i < data.length; i++) {
        const item = data[i];
        const isCoach = item.employeeTagEmployeeTypes.some(jtem => {
          return jtem.employeeTypeCode === 'Coach';
        });
        const isSale = item.employeeTagEmployeeTypes.some(jtem => {
          return jtem.employeeTypeCode === 'Sale';
        });
        const obj = {
          id: item.id,
          name: item.name,
          employeeTypeCodes: item.employeeTagEmployeeTypes,
          description: item.description,
          isCoach: isCoach,
          isSale: isSale
        };
        this.coachList.push(obj);
        this.saleList.push(obj);
      }
    },
    handleCheckCoach(val) {
      const key = val.split('e')[1];
      const data = this.coachList[key];
      const form = {
        name: data.name,
        employeeTypeCodes: [],
        description: data.description
      };
      if (data.isCoach) {
        data.isCoach = false;
        if (data.isSale) {
          form.employeeTypeCodes.push('Sale');
        }
      } else {
        data.isCoach = true;
        form.employeeTypeCodes.push('Coach');
        if (data.isSale) {
          form.employeeTypeCodes.push('Sale');
        }
      }
      var that = this;
      that.loading = true;
      api_PUT_ClubEmployeeTagId(data.id, form).then(res => {
        if (res) {
          that.getData();
          that.$message({ type: 'success', message: '操作成功！' });
        }
      }).catch(error => {
        that.$message({ type: 'error', message: error.error.message });
      });
    },
    handleCheckSale(val) {
      const key = val.split('e')[1];
      const data = this.saleList[key];
      const form = {
        name: data.name,
        employeeTypeCodes: [],
        description: data.description
      };
      if (data.isSale) {
        data.isSale = false;
        if (data.isCoach) {
          form.employeeTypeCodes.push('Coach');
        }
      } else {
        data.isSale = true;
        form.employeeTypeCodes.push('Sale');
        if (data.isCoach) {
          form.employeeTypeCodes.push('Coach');
        }
      }
      var that = this;
      that.loading = true;
      api_PUT_ClubEmployeeTagId(data.id, form).then(res => {
        if (res) {
          that.getData();
          that.$message({ type: 'success', message: '操作成功！' });
        }
      }).catch(error => {
        that.$message({ type: 'error', message: error.error.message });
      });
    }
  }
};
</script>

<style scoped>

</style>
